<template>
    <div>
        <el-container>
            <el-header>
                <div>
                    <img src="../assets/logo.png" alt="">
                    <span>扶贫助农平台</span>
                </div>
                <el-menu
                mode="horizontal"
                background-color="rgb(136,169,214)"
                text-color="#fff"
                router
                :default-active= "$route.path"  
                active-text-color="#fff">
                    <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
                        <template slot="title">
                            <span>{{item.title}}</span>
                        </template>
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    data(){
        return{
            navList:[
                {path:'/index',title:'首页'},
                {path:'/pinkunView',title:'贫困户'},
                {path:'/fupinView',title:'扶贫政策'},
                {path:'/zhiyuanzheView',title:'志愿者'},
                {path:'/liuyanView',title:'留言反馈'},
                {path:'/userView',title:'个人中心'},
                {path:'/welcome',title:'后台管理'},
                
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-header{
        display: flex;
        justify-content: space-between;
        background: rgb(136,169,214);
        color: white;   
        div{
            img{
                width: 50px;
                padding: 10px;
            }
            display: flex;
            align-items: center;
            font-size: 30px;
        }
    }
</style>